<template>
<section>
  <el-descriptions  title="基本信息" :column="3" size="small">
    <template slot="extra"  v-if="canModify">
      <el-button type="primary" size="small" @click.native="editBase">编 辑</el-button>
    </template>
       <el-descriptions-item label="合同名称">{{contractInfo.contractName||'--' }}</el-descriptions-item>
       <el-descriptions-item label="订单号">{{contractInfo.orderNo||'--' }}</el-descriptions-item>
       <el-descriptions-item label="负责人">{{contractInfo.chargePersonName||'--' }}</el-descriptions-item>

       <el-descriptions-item label="客户名称">
         <el-tag size="small">{{contractInfo.customerName||'--' }}</el-tag>
         </el-descriptions-item>
       <el-descriptions-item label="所属公司">{{ contractInfo.companyName||'--' }}</el-descriptions-item>
       <el-descriptions-item label="合同签署有效天数">{{contractInfo.validity?contractInfo.validity+'天':'--'}}</el-descriptions-item>

       <el-descriptions-item label="合同商定日期">{{contractInfo.contractDealDate | FormatDate('yyyy-MM-dd') ||'--'}}</el-descriptions-item>
       <el-descriptions-item label="合同完成时间">{{contractInfo.contractCompletionTime | FormatDate('yyyy-MM-dd')||'--' }}</el-descriptions-item>
       <el-descriptions-item label="备注">{{contractInfo.remark ||'--'}}</el-descriptions-item>
       <el-descriptions-item v-if="contractInfo.status===-1 || contractInfo.status===6" :label="contractInfo.status===-1?'合同取消原因':'合同签署失败原因'">{{contractInfo.failureReason ||'--'}}</el-descriptions-item>
  </el-descriptions>
  <el-descriptions  title="系统信息" :column="2" size="small">
       <el-descriptions-item label="创建人">{{contractInfo.creatorName||'--' }}</el-descriptions-item>
       <el-descriptions-item label="创建时间">{{contractInfo.createTime || '--' }}</el-descriptions-item>
       <el-descriptions-item label="最后更新人">{{contractInfo.updaterName||'--' }}</el-descriptions-item>
       <el-descriptions-item label="更新时间">{{contractInfo.updateTime ||'--' }}</el-descriptions-item>
  </el-descriptions>
  <el-dialog width="40%" title="编辑" append-to-body :visible.sync="editVisible" :before-close="close">
      <el-form :model="contractEditInfo" label-width="130px" ref="contractRef" :rules="rules">
               <el-form-item label="合同名称" prop="contractName">
                 <el-input   class="wp-form-280" v-model.trim="contractEditInfo.contractName" placeholder="合同名称"></el-input>
               </el-form-item>
              <el-form-item label="合同商定日期">
              <el-date-picker style="width:280px" type="date"  value-format="yyyy-MM-dd HH:mm:ss" v-model="contractEditInfo.contractDealDate" placeholder="合同商定日期"></el-date-picker>
              </el-form-item>
            <el-form-item label="合同签署有效天数" prop="validity">
                <el-input    style="width:280px"  v-model.number="contractEditInfo.validity" placeholder="合同签署有效天数">
                    <template slot="append">天</template>
                </el-input>
            </el-form-item>
              <el-form-item label="负责人" prop="chargePerson">
              <EmployeeSeach  v-model="contractEditInfo.chargePerson"  :employeeName.sync="contractEditInfo.chargePersonName"/>
              </el-form-item>
               <el-form-item label="备注" prop="remark">
                        <el-input
                        class="wp-form-280"
                        type="textarea"
                        v-model.trim="contractEditInfo.remark"
                        placeholder="备注"
                      ></el-input>
                    </el-form-item>
                  <div style="text-align:center" v-if="canModify">
                    <el-button type="" @click.native="close">取 消</el-button>
                    <el-button type="success" @click.native="save">确 定</el-button>
                  </div>
        </el-form>
  </el-dialog>
</section>
</template>

<script>
import EmployeeSeach from '@/views/components/EmployeeSeach'
import Mixins from '../mixins'
export default {
  components: {EmployeeSeach},
  mixins: [Mixins],
  props: {
    canModify: { type: Boolean, default: false },
    param: {type: Object,
      default: () => {
        return {}
      }}
  },
  data () {
    return {
      contractInfo: {},
      contractEditInfo: {},
      editVisible: false,
      rules: {
        contractName: [{ required: true, trigger: 'blur', message: '不能为空' }],
        chargePerson: [{ required: true, trigger: 'blur', message: '不能为空' }]
      }
    }
  },
  mounted () {
    this.getContractInfo(this.param.contractCode)
  },
  methods: {
    close () {
      this.editVisible = false
    },
    editBase () {
      this.editVisible = true
      this.contractEditInfo = {...this.contractInfo}
    },
    getContractInfo (contractCode) {
      this.requestOption('getContractInfo', contractCode, res => {
        this.contractInfo = res.data || {}
      })
    },
    save () {
      this.$refs.contractRef.validate(validate => {
        if (validate) {
          const params = {}
          params.contractCode = this.contractEditInfo.contractCode
          params.contractName = this.contractEditInfo.contractName
          params.validity = this.contractEditInfo.validity
          params.contractDealDate = this.contractEditInfo.contractDealDate
          params.chargePersonName = this.contractEditInfo.chargePersonName
          params.chargePerson = this.contractEditInfo.chargePerson
          params.remark = this.contractEditInfo.remark
          this.requestOption('updateContract', params, res => {
            if (res.code === 0) {
              this.getContractInfo(this.param.contractCode)
              this.close()
              this.$emit('editAfter', res)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
